<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Drag n'Drop</title>
		<style type="text/css">

			body{
				font-family:Arial;
				font-size:0.8em;
				font-size:2em;
				margin:0;
				padding:0;
				}
			
			ul	{
				list-style:none;
				padding:0;
				}
			li	{
				padding:20px;
				width:50px;
				cursor:default;
				margin:5px;
				text-align:center;
				background:#CCC;
				float:left;
				}
			
			li:hover
				{
				/*outline:1px solid black;*/
				}
			li:active
				{
				/*outline-width:2px;*/
				}
			
			
			ol	{
				list-style:none;
				padding:0;
				margin:0;
				}
			ol li
				{
				background:blue;
				color:white;
				font-weight:bold;
				position:absolute;
				top:400px;
				left:500px;
				width:40px;
				height:40px;
				padding:0;
				margin:0;
				}
			
		</style>
		<script type="text/javascript" src="../../3.current/1.6.20.30/core.js"></script>
		<script type="text/javascript" src="../selection/selection.js"></script>
		<script type="text/javascript" src="drag-drop.js"></script>
		<script type="text/javascript">
			
			function $(o){
				return typeof(o)=="string"?document.getElementById(o):o;
			}
				
			window.onload=function(){
				
				var base = $("oList").getElementsByTagName("li");
				var targets = $("uList").getElementsByTagName("li");
				
				var getTrigger = function(){
					if(!this.trigger)this.trigger=this.getElementsByTagName('span')[0];
					return this.trigger;
				};
				
				
				var d = new DragnDrop(base,targets);
				
				d.onCollide=function(o,t){
					t.forEach(function(z){
						z.style.outline="3px solid orange";
					});
				}
				d.onNotCollide=function(o,t){
					t.forEach(function(z){
						z.style.outline="0";
					});
				}
				d.onDrop=function(o,hasCollision,t){
					if(hasCollision){
						o.parentNode.removeChild(o);
						for(var i=0,b;b=t[i];i++){
							b.style.backgroundColor = "blue";
							b.style.border="";
							b.style.margin="";
							b.style.outline="";
							b.style.color="white";
						}
					}
				}
				d.run();
				
				/*
				var b=document.getElementsByTagName("div")[0], t=document.getElementsByTagName("span")[0];
				var z = new DragnDrop(b,t,null,"edgeBox").run();

				z.constrain = $("d9");
				
				z.onCollide=function(o,a){
					a.style.outline="3px solid orange";
				}
				z.onNotCollide=function(o,a){
					a.style.outline="0";
				}
				z.onDrop=function(o,hasCollision,t){
					if(hasCollision){
						o.parentNode.removeChild(o);
						for(var i=0,b;b=t[i];i++){
							b.style.backgroundColor = o.style.backgroundColor || document.defaultView.getComputedStyle(o,null).getPropertyValue("background-color");
							b.style.border="";
							b.style.margin="";
							b.style.outline="";
						}
					}
					//return false;
				}
				*/
		}
					
		
		</script>
	</head>
	<body>
		
		<ul id="uList">
			<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
			<li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
			<li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
			<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li>
			<li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li>
		</ul>
		
		<ol id="oList">
			<li style="left:100;">A</li>
			<li style="left:60px;">B</li><li style="left:120px;">C</li><li style="left:200px;">D</li>
			<li>E</li><li>F</li><li>G</li><li>H</li><li>I</li><li>J</li>
			<li>L</li><li>M</li><li>N</li><li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li><li>U</li>
		</ol>
		
	</body>
</html>
